<template>
  <q-page class="FeedBack-page" style="background-color: #F4F6FA;">
    <BackHeader title="投诉与建议" />

    <div class="q-mt-md q-pa-md">
      <div class="input-box">
        <textarea v-model="text" rows="6" placeholder="请输入投诉与建议"></textarea>
      </div>
      <q-btn
        unelevated
        rounded
        class="q-mt-md full-width"
        padding="sm sm"
        :loading="loading"
        style="
          background-color: #ffd101;
          color: #000;
          white-space: nowrap;
          font-weight: bold;
          font-size: 16px;
          letter-spacing: 1px;
        "
        @click="submit"
      >
        <div class="q-py-xs">提交</div>
      </q-btn>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { feedbackApi } from 'src/api/member';
import BackHeader from 'src/components/BackHeader.vue';
import { useAppStore } from 'src/stores/app-store';
import { showSuccessToast, showToast } from 'vant';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const back = () => {
  router.back();
};

const text = ref('');
const loading = ref(false);
const submit = async () => {
  if (!text.value) {
    return showToast('请输入投诉与建议');
  }
  loading.value = true;
  await feedbackApi({
    mobile: useAppStore().mobile,
    content: text.value,
  }).finally(() => (loading.value = false));
  showSuccessToast('提交成功');
  setTimeout(() => {
    back();
  }, 1000);
};
</script>

<style lang="scss" scoped>
.input-box {
  textarea {
    border: 1px solid #ffd101;
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    font-size: 16px;
  }
}
</style>
